import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import {Button} from 'antd'
import axios from 'axios'
export default function Echarts() {
  const mainRef = useRef()
  const myChart = useRef()
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart.current = echarts.init(mainRef.current);
    myChart.current.showLoading();
    axios.get('./mydata.json').then(res=>{
      myChart.current.hideLoading();
      res.data.nodes.forEach(function (node) {
        node.symbolSize = 5;
      });
      const  option = {
        title: {
          text: 'Les Miserables',
          subtext: 'Default layout',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {},
        legend: [
          {
            // selectedMode: 'single',
            data: res.data.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'force',
            data: res.data.nodes,
            links: res.data.links,
            categories: res.data.categories,
            roam: true,
            label: {
              position: 'right'
            },
            force: {
              repulsion: 100
            }
          }
        ]
      };
      myChart.current.setOption(option);
    })
  }, [])


  return (

   <div>
    
     <div ref={mainRef} style={{ width: 600, height: 400 }}></div>
   </div>
  )
}
